<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1082138" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe73f;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe692;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe617;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe73b;</span>
                <div class="name">朋友圈</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe73e;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe881;</span>
                <div class="name">IE</div>
                <div class="code-name">&amp;#xe881;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe884;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe884;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe885;</span>
                <div class="name">taobao</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe89c;</span>
                <div class="name">dingtalk</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe8a1;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe8a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe8aa;</span>
                <div class="name">alipay-circle-fill</div>
                <div class="code-name">&amp;#xe8aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe8b5;</span>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">&amp;#xe8b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe8b6;</span>
                <div class="name">IE-circle-fill</div>
                <div class="code-name">&amp;#xe8b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe8bc;</span>
                <div class="name">taobao-circle-fill</div>
                <div class="code-name">&amp;#xe8bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe649;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe652;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe668;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe669;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe66a;</span>
                <div class="name">notification_fill</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe66b;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe671;</span>
                <div class="name">deliver</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe672;</span>
                <div class="name">evaluate</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe673;</span>
                <div class="name">pay</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe675;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe67e;</span>
                <div class="name">discover</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe69c;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6b2;</span>
                <div class="name">remind</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6b7;</span>
                <div class="name">profile</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6bd;</span>
                <div class="name">discover_fill</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6c3;</span>
                <div class="name">vip</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6c9;</span>
                <div class="name">friend_add_fill</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ca;</span>
                <div class="name">friend_add</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d8;</span>
                <div class="name">round_add_fill</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d9;</span>
                <div class="name">round_add</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6db;</span>
                <div class="name">notification_forbid_fill</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6e0;</span>
                <div class="name">redpacket</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ec;</span>
                <div class="name">recharge_fill</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ed;</span>
                <div class="name">recharge</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ee;</span>
                <div class="name">vipcard</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ef;</span>
                <div class="name">voice</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6f0;</span>
                <div class="name">voice_fill</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6f9;</span>
                <div class="name">camera_rotate</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6fc;</span>
                <div class="name">flashlight_close</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6fd;</span>
                <div class="name">flashlight_open</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6ff;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe706;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe70b;</span>
                <div class="name">notice_fill</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe70c;</span>
                <div class="name">notice</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe718;</span>
                <div class="name">creative_fill</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe719;</span>
                <div class="name">creative</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe71a;</span>
                <div class="name">female</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe71c;</span>
                <div class="name">male</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe724;</span>
                <div class="name">camera_add</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe727;</span>
                <div class="name">camera_add_fill</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe737;</span>
                <div class="name">service_fill</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe739;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe74d;</span>
                <div class="name">backward_fill</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe74f;</span>
                <div class="name">play_fill</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe750;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe759;</span>
                <div class="name">post</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe769;</span>
                <div class="name">safe</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe77a;</span>
                <div class="name">profile_fill</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe77b;</span>
                <div class="name">sound</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe78e;</span>
                <div class="name">emoji_flash_fill</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe791;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a4;</span>
                <div class="name">record_fill</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a5;</span>
                <div class="name">record_light</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a6;</span>
                <div class="name">record</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a7;</span>
                <div class="name">round_add_light</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a8;</span>
                <div class="name">sound_light</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7b9;</span>
                <div class="name">voice_light</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7bc;</span>
                <div class="name">full</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7bd;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7c1;</span>
                <div class="name">medal_fill</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7c2;</span>
                <div class="name">medal</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7c3;</span>
                <div class="name">news_fill</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7c7;</span>
                <div class="name">video_fill</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7c8;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7cb;</span>
                <div class="name">exit</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ce;</span>
                <div class="name">money_bag_fill</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d1;</span>
                <div class="name">money_bag</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d3;</span>
                <div class="name">redpacket_fill</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e7;</span>
                <div class="name">service_light</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e8;</span>
                <div class="name">friend_add_light</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e9;</span>
                <div class="name">edit_light</div>
                <div class="code-name">&amp;#xe7e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7fc;</span>
                <div class="name">medal_fill_light</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7fd;</span>
                <div class="name">medal_light</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7fe;</span>
                <div class="name">news_fill_light</div>
                <div class="code-name">&amp;#xe7fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe801;</span>
                <div class="name">news_light</div>
                <div class="code-name">&amp;#xe801;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe805;</span>
                <div class="name">video_light</div>
                <div class="code-name">&amp;#xe805;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe813;</span>
                <div class="name">evaluate_fill</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe81d;</span>
                <div class="name">play_forward_fill</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe81e;</span>
                <div class="name">subscription_light</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe81f;</span>
                <div class="name">deliver_fill</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe820;</span>
                <div class="name">notice_forbid_fill</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe826;</span>
                <div class="name">phone_light</div>
                <div class="code-name">&amp;#xe826;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe829;</span>
                <div class="name">change_light</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe832;</span>
                <div class="name">round_location_fill</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe838;</span>
                <div class="name">round_redpacket_fill</div>
                <div class="code-name">&amp;#xe838;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe83a;</span>
                <div class="name">round_record_fill</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe83c;</span>
                <div class="name">round_redpacket</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe84a;</span>
                <div class="name">ticket_money_fill</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe84b;</span>
                <div class="name">arrow_left_fill</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe84c;</span>
                <div class="name">arrow_up_fill</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe631;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe75c;</span>
                <div class="name">round_down</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe621;</span>
                <div class="name">手电筒_开</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe623;</span>
                <div class="name">手电筒_关</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe61f;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a7;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65d;</span>
                <div class="name">Loading</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d7;</span>
                <div class="name">round</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe645;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe646;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe64a;</span>
                <div class="name">emoji</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe64b;</span>
                <div class="name">favor_fill</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe64c;</span>
                <div class="name">favor</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe64f;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe650;</span>
                <div class="name">location_fill</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe651;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe656;</span>
                <div class="name">round_check_fill</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe657;</span>
                <div class="name">round_check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe658;</span>
                <div class="name">round_close_fill</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe659;</span>
                <div class="name">round_close</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65a;</span>
                <div class="name">round_right_fill</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65b;</span>
                <div class="name">round_right</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65e;</span>
                <div class="name">time_fill</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe65f;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe661;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe662;</span>
                <div class="name">warn_fill</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe663;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe664;</span>
                <div class="name">camera_fill</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe665;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe666;</span>
                <div class="name">comment_fill</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe667;</span>
                <div class="name">comment</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe679;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe67c;</span>
                <div class="name">cascades</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe682;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe684;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe689;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe68a;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe69b;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe69e;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe69f;</span>
                <div class="name">pull_down</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a0;</span>
                <div class="name">pull_up</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a3;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a4;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a5;</span>
                <div class="name">more_android</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6a6;</span>
                <div class="name">delete_fill</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6af;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6b4;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6b8;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6b9;</span>
                <div class="name">cart_fill</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6bb;</span>
                <div class="name">home_fill</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6bc;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6c0;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6c2;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d4;</span>
                <div class="name">square_check_fill</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d5;</span>
                <div class="name">square</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6d6;</span>
                <div class="name">square_check</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6da;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6de;</span>
                <div class="name">fold</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6e4;</span>
                <div class="name">info_fill</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6e5;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6f3;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe6fe;</span>
                <div class="name">search_list</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe700;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe703;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe704;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe705;</span>
                <div class="name">mobile_fill</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe707;</span>
                <div class="name">countdown_fill</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe708;</span>
                <div class="name">countdown</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe71b;</span>
                <div class="name">keyboard</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe71f;</span>
                <div class="name">pull_left</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe720;</span>
                <div class="name">pull_right</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe72c;</span>
                <div class="name">pic_fill</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe72d;</span>
                <div class="name">refresh_arrow</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe73c;</span>
                <div class="name">attention_fill</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe73d;</span>
                <div class="name">attention</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe751;</span>
                <div class="name">tag_fill</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe752;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe75b;</span>
                <div class="name">radio_box</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe75d;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe763;</span>
                <div class="name">radio_box_fill</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe768;</span>
                <div class="name">move</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe779;</span>
                <div class="name">message_fill</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe78b;</span>
                <div class="name">my</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe78c;</span>
                <div class="name">my_fill</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe79b;</span>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe79c;</span>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a1;</span>
                <div class="name">emoji_light</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7a3;</span>
                <div class="name">keyboard_light</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ad;</span>
                <div class="name">sort_light</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7b2;</span>
                <div class="name">attention_forbid</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7b3;</span>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7b7;</span>
                <div class="name">pic_light</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7cf;</span>
                <div class="name">usefull_fill</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d0;</span>
                <div class="name">usefull</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d5;</span>
                <div class="name">home_light</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d6;</span>
                <div class="name">my_light</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7d8;</span>
                <div class="name">cart_light</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7da;</span>
                <div class="name">home_fill_light</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7db;</span>
                <div class="name">cart_fill_light</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7dd;</span>
                <div class="name">my_fill_light</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e0;</span>
                <div class="name">search_light</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e1;</span>
                <div class="name">scan_light</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e3;</span>
                <div class="name">message_light</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7e4;</span>
                <div class="name">close_light</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ea;</span>
                <div class="name">camera_light</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ec;</span>
                <div class="name">refresh_light</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ed;</span>
                <div class="name">back_light</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ee;</span>
                <div class="name">share_light</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7ef;</span>
                <div class="name">comment_light</div>
                <div class="code-name">&amp;#xe7ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7f1;</span>
                <div class="name">favor_light</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7f3;</span>
                <div class="name">comment_fill_light</div>
                <div class="code-name">&amp;#xe7f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7f5;</span>
                <div class="name">more_android_light</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe7f7;</span>
                <div class="name">more_light</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe803;</span>
                <div class="name">message_fill_light</div>
                <div class="code-name">&amp;#xe803;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe806;</span>
                <div class="name">search_list_light</div>
                <div class="code-name">&amp;#xe806;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80a;</span>
                <div class="name">favor_fill_light</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80b;</span>
                <div class="name">delete_light</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80c;</span>
                <div class="name">back_android</div>
                <div class="code-name">&amp;#xe80c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80d;</span>
                <div class="name">back_android_light</div>
                <div class="code-name">&amp;#xe80d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80e;</span>
                <div class="name">down_light</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe80f;</span>
                <div class="name">round_close_light</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe810;</span>
                <div class="name">round_close_fill_light</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe819;</span>
                <div class="name">location_light</div>
                <div class="code-name">&amp;#xe819;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe822;</span>
                <div class="name">settings_light</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon cd_iconfont">&#xe841;</span>
                <div class="name">warn_light</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'cd_iconfont';
  src: url('iconfont.woff2?t=1705302861269') format('woff2'),
       url('iconfont.woff?t=1705302861269') format('woff'),
       url('iconfont.ttf?t=1705302861269') format('truetype'),
       url('iconfont.svg?t=1705302861269#cd_iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.cd_iconfont {
  font-family: "cd_iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="cd_iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"cd_iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon cd_iconfont icon-weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-wenjian1"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-wenjian2"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pengyouquan1"></span>
            <div class="name">
              朋友圈
            </div>
            <div class="code-name">.icon-pengyouquan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-IE"></span>
            <div class="name">
              IE
            </div>
            <div class="code-name">.icon-IE
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-alipay"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-taobao"></span>
            <div class="name">
              taobao
            </div>
            <div class="code-name">.icon-taobao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-dingtalk"></span>
            <div class="name">
              dingtalk
            </div>
            <div class="code-name">.icon-dingtalk
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-QQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-alipay-circle-fill"></span>
            <div class="name">
              alipay-circle-fill
            </div>
            <div class="code-name">.icon-alipay-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-QQ-circle-fill"></span>
            <div class="name">
              QQ-circle-fill
            </div>
            <div class="code-name">.icon-QQ-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-IE-circle-fill"></span>
            <div class="name">
              IE-circle-fill
            </div>
            <div class="code-name">.icon-IE-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-taobao-circle-fill"></span>
            <div class="name">
              taobao-circle-fill
            </div>
            <div class="code-name">.icon-taobao-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-likefill"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.icon-likefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-notificationfill"></span>
            <div class="name">
              notification_fill
            </div>
            <div class="code-name">.icon-notificationfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-deliver"></span>
            <div class="name">
              deliver
            </div>
            <div class="code-name">.icon-deliver
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-evaluate"></span>
            <div class="name">
              evaluate
            </div>
            <div class="code-name">.icon-evaluate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pay"></span>
            <div class="name">
              pay
            </div>
            <div class="code-name">.icon-pay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon-send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-discover"></span>
            <div class="name">
              discover
            </div>
            <div class="code-name">.icon-discover
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-remind"></span>
            <div class="name">
              remind
            </div>
            <div class="code-name">.icon-remind
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-profile"></span>
            <div class="name">
              profile
            </div>
            <div class="code-name">.icon-profile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-discoverfill"></span>
            <div class="name">
              discover_fill
            </div>
            <div class="code-name">.icon-discoverfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-vip"></span>
            <div class="name">
              vip
            </div>
            <div class="code-name">.icon-vip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-friendaddfill"></span>
            <div class="name">
              friend_add_fill
            </div>
            <div class="code-name">.icon-friendaddfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-friendadd"></span>
            <div class="name">
              friend_add
            </div>
            <div class="code-name">.icon-friendadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundaddfill"></span>
            <div class="name">
              round_add_fill
            </div>
            <div class="code-name">.icon-roundaddfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundadd"></span>
            <div class="name">
              round_add
            </div>
            <div class="code-name">.icon-roundadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-notificationforbidfill"></span>
            <div class="name">
              notification_forbid_fill
            </div>
            <div class="code-name">.icon-notificationforbidfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-redpacket"></span>
            <div class="name">
              redpacket
            </div>
            <div class="code-name">.icon-redpacket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-rechargefill"></span>
            <div class="name">
              recharge_fill
            </div>
            <div class="code-name">.icon-rechargefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-recharge"></span>
            <div class="name">
              recharge
            </div>
            <div class="code-name">.icon-recharge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-vipcard"></span>
            <div class="name">
              vipcard
            </div>
            <div class="code-name">.icon-vipcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-voice"></span>
            <div class="name">
              voice
            </div>
            <div class="code-name">.icon-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-voicefill"></span>
            <div class="name">
              voice_fill
            </div>
            <div class="code-name">.icon-voicefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-camerarotate"></span>
            <div class="name">
              camera_rotate
            </div>
            <div class="code-name">.icon-camerarotate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-flashlightclose"></span>
            <div class="name">
              flashlight_close
            </div>
            <div class="code-name">.icon-flashlightclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-flashlightopen"></span>
            <div class="name">
              flashlight_open
            </div>
            <div class="code-name">.icon-flashlightopen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-noticefill"></span>
            <div class="name">
              notice_fill
            </div>
            <div class="code-name">.icon-noticefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-notice"></span>
            <div class="name">
              notice
            </div>
            <div class="code-name">.icon-notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-creativefill"></span>
            <div class="name">
              creative_fill
            </div>
            <div class="code-name">.icon-creativefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-creative"></span>
            <div class="name">
              creative
            </div>
            <div class="code-name">.icon-creative
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-female"></span>
            <div class="name">
              female
            </div>
            <div class="code-name">.icon-female
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-male"></span>
            <div class="name">
              male
            </div>
            <div class="code-name">.icon-male
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cameraadd"></span>
            <div class="name">
              camera_add
            </div>
            <div class="code-name">.icon-cameraadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cameraaddfill"></span>
            <div class="name">
              camera_add_fill
            </div>
            <div class="code-name">.icon-cameraaddfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-servicefill"></span>
            <div class="name">
              service_fill
            </div>
            <div class="code-name">.icon-servicefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-backwardfill"></span>
            <div class="name">
              backward_fill
            </div>
            <div class="code-name">.icon-backwardfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-playfill"></span>
            <div class="name">
              play_fill
            </div>
            <div class="code-name">.icon-playfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.icon-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-post"></span>
            <div class="name">
              post
            </div>
            <div class="code-name">.icon-post
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-safe"></span>
            <div class="name">
              safe
            </div>
            <div class="code-name">.icon-safe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-profilefill"></span>
            <div class="name">
              profile_fill
            </div>
            <div class="code-name">.icon-profilefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-sound"></span>
            <div class="name">
              sound
            </div>
            <div class="code-name">.icon-sound
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-emojiflashfill"></span>
            <div class="name">
              emoji_flash_fill
            </div>
            <div class="code-name">.icon-emojiflashfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-recordfill"></span>
            <div class="name">
              record_fill
            </div>
            <div class="code-name">.icon-recordfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-recordlight"></span>
            <div class="name">
              record_light
            </div>
            <div class="code-name">.icon-recordlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-record"></span>
            <div class="name">
              record
            </div>
            <div class="code-name">.icon-record
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundaddlight"></span>
            <div class="name">
              round_add_light
            </div>
            <div class="code-name">.icon-roundaddlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-soundlight"></span>
            <div class="name">
              sound_light
            </div>
            <div class="code-name">.icon-soundlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-voicelight"></span>
            <div class="name">
              voice_light
            </div>
            <div class="code-name">.icon-voicelight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-full"></span>
            <div class="name">
              full
            </div>
            <div class="code-name">.icon-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-medalfill"></span>
            <div class="name">
              medal_fill
            </div>
            <div class="code-name">.icon-medalfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-medal"></span>
            <div class="name">
              medal
            </div>
            <div class="code-name">.icon-medal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-newsfill"></span>
            <div class="name">
              news_fill
            </div>
            <div class="code-name">.icon-newsfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-videofill"></span>
            <div class="name">
              video_fill
            </div>
            <div class="code-name">.icon-videofill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-exit"></span>
            <div class="name">
              exit
            </div>
            <div class="code-name">.icon-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-moneybagfill"></span>
            <div class="name">
              money_bag_fill
            </div>
            <div class="code-name">.icon-moneybagfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-moneybag"></span>
            <div class="name">
              money_bag
            </div>
            <div class="code-name">.icon-moneybag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-redpacket_fill"></span>
            <div class="name">
              redpacket_fill
            </div>
            <div class="code-name">.icon-redpacket_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-service_light"></span>
            <div class="name">
              service_light
            </div>
            <div class="code-name">.icon-service_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-friend_add_light"></span>
            <div class="name">
              friend_add_light
            </div>
            <div class="code-name">.icon-friend_add_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-edit_light"></span>
            <div class="name">
              edit_light
            </div>
            <div class="code-name">.icon-edit_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-medal_fill_light"></span>
            <div class="name">
              medal_fill_light
            </div>
            <div class="code-name">.icon-medal_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-medal_light"></span>
            <div class="name">
              medal_light
            </div>
            <div class="code-name">.icon-medal_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-news_fill_light"></span>
            <div class="name">
              news_fill_light
            </div>
            <div class="code-name">.icon-news_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-news_light"></span>
            <div class="name">
              news_light
            </div>
            <div class="code-name">.icon-news_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-video_light"></span>
            <div class="name">
              video_light
            </div>
            <div class="code-name">.icon-video_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-evaluate_fill"></span>
            <div class="name">
              evaluate_fill
            </div>
            <div class="code-name">.icon-evaluate_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-play_forward_fill"></span>
            <div class="name">
              play_forward_fill
            </div>
            <div class="code-name">.icon-play_forward_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-subscription_light"></span>
            <div class="name">
              subscription_light
            </div>
            <div class="code-name">.icon-subscription_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-deliver_fill"></span>
            <div class="name">
              deliver_fill
            </div>
            <div class="code-name">.icon-deliver_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-notice_forbid_fill"></span>
            <div class="name">
              notice_forbid_fill
            </div>
            <div class="code-name">.icon-notice_forbid_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-phone_light"></span>
            <div class="name">
              phone_light
            </div>
            <div class="code-name">.icon-phone_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-change"></span>
            <div class="name">
              change_light
            </div>
            <div class="code-name">.icon-change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_location_fill"></span>
            <div class="name">
              round_location_fill
            </div>
            <div class="code-name">.icon-round_location_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_redpacket_fill"></span>
            <div class="name">
              round_redpacket_fill
            </div>
            <div class="code-name">.icon-round_redpacket_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_record_fill"></span>
            <div class="name">
              round_record_fill
            </div>
            <div class="code-name">.icon-round_record_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_redpacket"></span>
            <div class="name">
              round_redpacket
            </div>
            <div class="code-name">.icon-round_redpacket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-ticket_money_fill"></span>
            <div class="name">
              ticket_money_fill
            </div>
            <div class="code-name">.icon-ticket_money_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-arrow_left_fill"></span>
            <div class="name">
              arrow_left_fill
            </div>
            <div class="code-name">.icon-arrow_left_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-arrow_up_fill"></span>
            <div class="name">
              arrow_up_fill
            </div>
            <div class="code-name">.icon-arrow_up_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-rounddown"></span>
            <div class="name">
              round_down
            </div>
            <div class="code-name">.icon-rounddown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-shoudiantong_kai"></span>
            <div class="name">
              手电筒_开
            </div>
            <div class="code-name">.icon-shoudiantong_kai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-shoudiantong_guan"></span>
            <div class="name">
              手电筒_关
            </div>
            <div class="code-name">.icon-shoudiantong_guan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-loading1"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loading1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-loadBrush"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loadBrush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-Loading"></span>
            <div class="name">
              Loading
            </div>
            <div class="code-name">.icon-Loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round"></span>
            <div class="name">
              round
            </div>
            <div class="code-name">.icon-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-emoji"></span>
            <div class="name">
              emoji
            </div>
            <div class="code-name">.icon-emoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-favorfill"></span>
            <div class="name">
              favor_fill
            </div>
            <div class="code-name">.icon-favorfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-favor"></span>
            <div class="name">
              favor
            </div>
            <div class="code-name">.icon-favor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-locationfill"></span>
            <div class="name">
              location_fill
            </div>
            <div class="code-name">.icon-locationfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundcheckfill"></span>
            <div class="name">
              round_check_fill
            </div>
            <div class="code-name">.icon-roundcheckfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundcheck"></span>
            <div class="name">
              round_check
            </div>
            <div class="code-name">.icon-roundcheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundclosefill"></span>
            <div class="name">
              round_close_fill
            </div>
            <div class="code-name">.icon-roundclosefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundclose"></span>
            <div class="name">
              round_close
            </div>
            <div class="code-name">.icon-roundclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundrightfill"></span>
            <div class="name">
              round_right_fill
            </div>
            <div class="code-name">.icon-roundrightfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-roundright"></span>
            <div class="name">
              round_right
            </div>
            <div class="code-name">.icon-roundright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-timefill"></span>
            <div class="name">
              time_fill
            </div>
            <div class="code-name">.icon-timefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.icon-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-warnfill"></span>
            <div class="name">
              warn_fill
            </div>
            <div class="code-name">.icon-warnfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.icon-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-camerafill"></span>
            <div class="name">
              camera_fill
            </div>
            <div class="code-name">.icon-camerafill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-commentfill"></span>
            <div class="name">
              comment_fill
            </div>
            <div class="code-name">.icon-commentfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">.icon-comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cascades"></span>
            <div class="name">
              cascades
            </div>
            <div class="code-name">.icon-cascades
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.icon-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pic"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.icon-pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.icon-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pulldown"></span>
            <div class="name">
              pull_down
            </div>
            <div class="code-name">.icon-pulldown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pullup"></span>
            <div class="name">
              pull_up
            </div>
            <div class="code-name">.icon-pullup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-moreandroid"></span>
            <div class="name">
              more_android
            </div>
            <div class="code-name">.icon-moreandroid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-deletefill"></span>
            <div class="name">
              delete_fill
            </div>
            <div class="code-name">.icon-deletefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cartfill"></span>
            <div class="name">
              cart_fill
            </div>
            <div class="code-name">.icon-cartfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-homefill"></span>
            <div class="name">
              home_fill
            </div>
            <div class="code-name">.icon-homefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-squarecheckfill"></span>
            <div class="name">
              square_check_fill
            </div>
            <div class="code-name">.icon-squarecheckfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-square"></span>
            <div class="name">
              square
            </div>
            <div class="code-name">.icon-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-squarecheck"></span>
            <div class="name">
              square_check
            </div>
            <div class="code-name">.icon-squarecheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-fold"></span>
            <div class="name">
              fold
            </div>
            <div class="code-name">.icon-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-infofill"></span>
            <div class="name">
              info_fill
            </div>
            <div class="code-name">.icon-infofill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-searchlist"></span>
            <div class="name">
              search_list
            </div>
            <div class="code-name">.icon-searchlist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.icon-mobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-mobilefill"></span>
            <div class="name">
              mobile_fill
            </div>
            <div class="code-name">.icon-mobilefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-countdownfill"></span>
            <div class="name">
              countdown_fill
            </div>
            <div class="code-name">.icon-countdownfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-countdown"></span>
            <div class="name">
              countdown
            </div>
            <div class="code-name">.icon-countdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-keyboard"></span>
            <div class="name">
              keyboard
            </div>
            <div class="code-name">.icon-keyboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pullleft"></span>
            <div class="name">
              pull_left
            </div>
            <div class="code-name">.icon-pullleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-pullright"></span>
            <div class="name">
              pull_right
            </div>
            <div class="code-name">.icon-pullright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-picfill"></span>
            <div class="name">
              pic_fill
            </div>
            <div class="code-name">.icon-picfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-refresharrow"></span>
            <div class="name">
              refresh_arrow
            </div>
            <div class="code-name">.icon-refresharrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-attentionfill"></span>
            <div class="name">
              attention_fill
            </div>
            <div class="code-name">.icon-attentionfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-attention"></span>
            <div class="name">
              attention
            </div>
            <div class="code-name">.icon-attention
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-tagfill"></span>
            <div class="name">
              tag_fill
            </div>
            <div class="code-name">.icon-tagfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-radiobox"></span>
            <div class="name">
              radio_box
            </div>
            <div class="code-name">.icon-radiobox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-radioboxfill"></span>
            <div class="name">
              radio_box_fill
            </div>
            <div class="code-name">.icon-radioboxfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-move"></span>
            <div class="name">
              move
            </div>
            <div class="code-name">.icon-move
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-messagefill"></span>
            <div class="name">
              message_fill
            </div>
            <div class="code-name">.icon-messagefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-my"></span>
            <div class="name">
              my
            </div>
            <div class="code-name">.icon-my
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-myfill"></span>
            <div class="name">
              my_fill
            </div>
            <div class="code-name">.icon-myfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-triangledownfill"></span>
            <div class="name">
              triangle_down_fill
            </div>
            <div class="code-name">.icon-triangledownfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-triangleupfill"></span>
            <div class="name">
              triangle_up_fill
            </div>
            <div class="code-name">.icon-triangleupfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-emojilight"></span>
            <div class="name">
              emoji_light
            </div>
            <div class="code-name">.icon-emojilight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-keyboardlight"></span>
            <div class="name">
              keyboard_light
            </div>
            <div class="code-name">.icon-keyboardlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-sortlight"></span>
            <div class="name">
              sort_light
            </div>
            <div class="code-name">.icon-sortlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-attentionforbid"></span>
            <div class="name">
              attention_forbid
            </div>
            <div class="code-name">.icon-attentionforbid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-attentionforbidfill"></span>
            <div class="name">
              attention_forbid_fill
            </div>
            <div class="code-name">.icon-attentionforbidfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-piclight"></span>
            <div class="name">
              pic_light
            </div>
            <div class="code-name">.icon-piclight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-usefullfill"></span>
            <div class="name">
              usefull_fill
            </div>
            <div class="code-name">.icon-usefullfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-usefull"></span>
            <div class="name">
              usefull
            </div>
            <div class="code-name">.icon-usefull
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-home_light"></span>
            <div class="name">
              home_light
            </div>
            <div class="code-name">.icon-home_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-my_light"></span>
            <div class="name">
              my_light
            </div>
            <div class="code-name">.icon-my_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cart_light"></span>
            <div class="name">
              cart_light
            </div>
            <div class="code-name">.icon-cart_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-home_fill_light"></span>
            <div class="name">
              home_fill_light
            </div>
            <div class="code-name">.icon-home_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-cart_fill_light"></span>
            <div class="name">
              cart_fill_light
            </div>
            <div class="code-name">.icon-cart_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-my_fill_light"></span>
            <div class="name">
              my_fill_light
            </div>
            <div class="code-name">.icon-my_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-search_light"></span>
            <div class="name">
              search_light
            </div>
            <div class="code-name">.icon-search_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-scan_light"></span>
            <div class="name">
              scan_light
            </div>
            <div class="code-name">.icon-scan_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-message_light"></span>
            <div class="name">
              message_light
            </div>
            <div class="code-name">.icon-message_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-close_light"></span>
            <div class="name">
              close_light
            </div>
            <div class="code-name">.icon-close_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-camera_light"></span>
            <div class="name">
              camera_light
            </div>
            <div class="code-name">.icon-camera_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-refresh_light"></span>
            <div class="name">
              refresh_light
            </div>
            <div class="code-name">.icon-refresh_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-back_light"></span>
            <div class="name">
              back_light
            </div>
            <div class="code-name">.icon-back_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-share_light"></span>
            <div class="name">
              share_light
            </div>
            <div class="code-name">.icon-share_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-comment_light"></span>
            <div class="name">
              comment_light
            </div>
            <div class="code-name">.icon-comment_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-favor_light"></span>
            <div class="name">
              favor_light
            </div>
            <div class="code-name">.icon-favor_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-comment_fill_light"></span>
            <div class="name">
              comment_fill_light
            </div>
            <div class="code-name">.icon-comment_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-more_android_light"></span>
            <div class="name">
              more_android_light
            </div>
            <div class="code-name">.icon-more_android_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-more_light"></span>
            <div class="name">
              more_light
            </div>
            <div class="code-name">.icon-more_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-message_fill_light"></span>
            <div class="name">
              message_fill_light
            </div>
            <div class="code-name">.icon-message_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-search_list_light"></span>
            <div class="name">
              search_list_light
            </div>
            <div class="code-name">.icon-search_list_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-favor_fill_light"></span>
            <div class="name">
              favor_fill_light
            </div>
            <div class="code-name">.icon-favor_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-delete_light"></span>
            <div class="name">
              delete_light
            </div>
            <div class="code-name">.icon-delete_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-back_android"></span>
            <div class="name">
              back_android
            </div>
            <div class="code-name">.icon-back_android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-back_android_light"></span>
            <div class="name">
              back_android_light
            </div>
            <div class="code-name">.icon-back_android_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-down_light"></span>
            <div class="name">
              down_light
            </div>
            <div class="code-name">.icon-down_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_close_light"></span>
            <div class="name">
              round_close_light
            </div>
            <div class="code-name">.icon-round_close_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-round_close_fill_light"></span>
            <div class="name">
              round_close_fill_light
            </div>
            <div class="code-name">.icon-round_close_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-location_light"></span>
            <div class="name">
              location_light
            </div>
            <div class="code-name">.icon-location_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-settings_light"></span>
            <div class="name">
              settings_light
            </div>
            <div class="code-name">.icon-settings_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cd_iconfont icon-warn_light"></span>
            <div class="name">
              warn_light
            </div>
            <div class="code-name">.icon-warn_light
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="cd_iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            cd_iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian1"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian2"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pengyouquan1"></use>
                </svg>
                <div class="name">朋友圈</div>
                <div class="code-name">#icon-pengyouquan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-IE"></use>
                </svg>
                <div class="name">IE</div>
                <div class="code-name">#icon-IE</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao"></use>
                </svg>
                <div class="name">taobao</div>
                <div class="code-name">#icon-taobao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingtalk"></use>
                </svg>
                <div class="name">dingtalk</div>
                <div class="code-name">#icon-dingtalk</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-QQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay-circle-fill"></use>
                </svg>
                <div class="name">alipay-circle-fill</div>
                <div class="code-name">#icon-alipay-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ-circle-fill"></use>
                </svg>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">#icon-QQ-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-IE-circle-fill"></use>
                </svg>
                <div class="name">IE-circle-fill</div>
                <div class="code-name">#icon-IE-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao-circle-fill"></use>
                </svg>
                <div class="name">taobao-circle-fill</div>
                <div class="code-name">#icon-taobao-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#icon-likefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notificationfill"></use>
                </svg>
                <div class="name">notification_fill</div>
                <div class="code-name">#icon-notificationfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#icon-notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deliver"></use>
                </svg>
                <div class="name">deliver</div>
                <div class="code-name">#icon-deliver</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-evaluate"></use>
                </svg>
                <div class="name">evaluate</div>
                <div class="code-name">#icon-evaluate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pay"></use>
                </svg>
                <div class="name">pay</div>
                <div class="code-name">#icon-pay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon-send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discover"></use>
                </svg>
                <div class="name">discover</div>
                <div class="code-name">#icon-discover</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remind"></use>
                </svg>
                <div class="name">remind</div>
                <div class="code-name">#icon-remind</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-profile"></use>
                </svg>
                <div class="name">profile</div>
                <div class="code-name">#icon-profile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discoverfill"></use>
                </svg>
                <div class="name">discover_fill</div>
                <div class="code-name">#icon-discoverfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip"></use>
                </svg>
                <div class="name">vip</div>
                <div class="code-name">#icon-vip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-friendaddfill"></use>
                </svg>
                <div class="name">friend_add_fill</div>
                <div class="code-name">#icon-friendaddfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-friendadd"></use>
                </svg>
                <div class="name">friend_add</div>
                <div class="code-name">#icon-friendadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundaddfill"></use>
                </svg>
                <div class="name">round_add_fill</div>
                <div class="code-name">#icon-roundaddfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundadd"></use>
                </svg>
                <div class="name">round_add</div>
                <div class="code-name">#icon-roundadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notificationforbidfill"></use>
                </svg>
                <div class="name">notification_forbid_fill</div>
                <div class="code-name">#icon-notificationforbidfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-redpacket"></use>
                </svg>
                <div class="name">redpacket</div>
                <div class="code-name">#icon-redpacket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rechargefill"></use>
                </svg>
                <div class="name">recharge_fill</div>
                <div class="code-name">#icon-rechargefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recharge"></use>
                </svg>
                <div class="name">recharge</div>
                <div class="code-name">#icon-recharge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vipcard"></use>
                </svg>
                <div class="name">vipcard</div>
                <div class="code-name">#icon-vipcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice"></use>
                </svg>
                <div class="name">voice</div>
                <div class="code-name">#icon-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voicefill"></use>
                </svg>
                <div class="name">voice_fill</div>
                <div class="code-name">#icon-voicefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camerarotate"></use>
                </svg>
                <div class="name">camera_rotate</div>
                <div class="code-name">#icon-camerarotate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flashlightclose"></use>
                </svg>
                <div class="name">flashlight_close</div>
                <div class="code-name">#icon-flashlightclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flashlightopen"></use>
                </svg>
                <div class="name">flashlight_open</div>
                <div class="code-name">#icon-flashlightopen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-noticefill"></use>
                </svg>
                <div class="name">notice_fill</div>
                <div class="code-name">#icon-noticefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notice"></use>
                </svg>
                <div class="name">notice</div>
                <div class="code-name">#icon-notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-creativefill"></use>
                </svg>
                <div class="name">creative_fill</div>
                <div class="code-name">#icon-creativefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-creative"></use>
                </svg>
                <div class="name">creative</div>
                <div class="code-name">#icon-creative</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-female"></use>
                </svg>
                <div class="name">female</div>
                <div class="code-name">#icon-female</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-male"></use>
                </svg>
                <div class="name">male</div>
                <div class="code-name">#icon-male</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cameraadd"></use>
                </svg>
                <div class="name">camera_add</div>
                <div class="code-name">#icon-cameraadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cameraaddfill"></use>
                </svg>
                <div class="name">camera_add_fill</div>
                <div class="code-name">#icon-cameraaddfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-servicefill"></use>
                </svg>
                <div class="name">service_fill</div>
                <div class="code-name">#icon-servicefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-backwardfill"></use>
                </svg>
                <div class="name">backward_fill</div>
                <div class="code-name">#icon-backwardfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playfill"></use>
                </svg>
                <div class="name">play_fill</div>
                <div class="code-name">#icon-playfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#icon-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-post"></use>
                </svg>
                <div class="name">post</div>
                <div class="code-name">#icon-post</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-safe"></use>
                </svg>
                <div class="name">safe</div>
                <div class="code-name">#icon-safe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-profilefill"></use>
                </svg>
                <div class="name">profile_fill</div>
                <div class="code-name">#icon-profilefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound"></use>
                </svg>
                <div class="name">sound</div>
                <div class="code-name">#icon-sound</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emojiflashfill"></use>
                </svg>
                <div class="name">emoji_flash_fill</div>
                <div class="code-name">#icon-emojiflashfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recordfill"></use>
                </svg>
                <div class="name">record_fill</div>
                <div class="code-name">#icon-recordfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recordlight"></use>
                </svg>
                <div class="name">record_light</div>
                <div class="code-name">#icon-recordlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-record"></use>
                </svg>
                <div class="name">record</div>
                <div class="code-name">#icon-record</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundaddlight"></use>
                </svg>
                <div class="name">round_add_light</div>
                <div class="code-name">#icon-roundaddlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-soundlight"></use>
                </svg>
                <div class="name">sound_light</div>
                <div class="code-name">#icon-soundlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voicelight"></use>
                </svg>
                <div class="name">voice_light</div>
                <div class="code-name">#icon-voicelight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full"></use>
                </svg>
                <div class="name">full</div>
                <div class="code-name">#icon-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medalfill"></use>
                </svg>
                <div class="name">medal_fill</div>
                <div class="code-name">#icon-medalfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medal"></use>
                </svg>
                <div class="name">medal</div>
                <div class="code-name">#icon-medal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-newsfill"></use>
                </svg>
                <div class="name">news_fill</div>
                <div class="code-name">#icon-newsfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-videofill"></use>
                </svg>
                <div class="name">video_fill</div>
                <div class="code-name">#icon-videofill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exit"></use>
                </svg>
                <div class="name">exit</div>
                <div class="code-name">#icon-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moneybagfill"></use>
                </svg>
                <div class="name">money_bag_fill</div>
                <div class="code-name">#icon-moneybagfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moneybag"></use>
                </svg>
                <div class="name">money_bag</div>
                <div class="code-name">#icon-moneybag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-redpacket_fill"></use>
                </svg>
                <div class="name">redpacket_fill</div>
                <div class="code-name">#icon-redpacket_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-service_light"></use>
                </svg>
                <div class="name">service_light</div>
                <div class="code-name">#icon-service_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-friend_add_light"></use>
                </svg>
                <div class="name">friend_add_light</div>
                <div class="code-name">#icon-friend_add_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit_light"></use>
                </svg>
                <div class="name">edit_light</div>
                <div class="code-name">#icon-edit_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medal_fill_light"></use>
                </svg>
                <div class="name">medal_fill_light</div>
                <div class="code-name">#icon-medal_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medal_light"></use>
                </svg>
                <div class="name">medal_light</div>
                <div class="code-name">#icon-medal_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news_fill_light"></use>
                </svg>
                <div class="name">news_fill_light</div>
                <div class="code-name">#icon-news_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news_light"></use>
                </svg>
                <div class="name">news_light</div>
                <div class="code-name">#icon-news_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video_light"></use>
                </svg>
                <div class="name">video_light</div>
                <div class="code-name">#icon-video_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-evaluate_fill"></use>
                </svg>
                <div class="name">evaluate_fill</div>
                <div class="code-name">#icon-evaluate_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play_forward_fill"></use>
                </svg>
                <div class="name">play_forward_fill</div>
                <div class="code-name">#icon-play_forward_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-subscription_light"></use>
                </svg>
                <div class="name">subscription_light</div>
                <div class="code-name">#icon-subscription_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deliver_fill"></use>
                </svg>
                <div class="name">deliver_fill</div>
                <div class="code-name">#icon-deliver_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notice_forbid_fill"></use>
                </svg>
                <div class="name">notice_forbid_fill</div>
                <div class="code-name">#icon-notice_forbid_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone_light"></use>
                </svg>
                <div class="name">phone_light</div>
                <div class="code-name">#icon-phone_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change"></use>
                </svg>
                <div class="name">change_light</div>
                <div class="code-name">#icon-change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_location_fill"></use>
                </svg>
                <div class="name">round_location_fill</div>
                <div class="code-name">#icon-round_location_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_redpacket_fill"></use>
                </svg>
                <div class="name">round_redpacket_fill</div>
                <div class="code-name">#icon-round_redpacket_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_record_fill"></use>
                </svg>
                <div class="name">round_record_fill</div>
                <div class="code-name">#icon-round_record_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_redpacket"></use>
                </svg>
                <div class="name">round_redpacket</div>
                <div class="code-name">#icon-round_redpacket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ticket_money_fill"></use>
                </svg>
                <div class="name">ticket_money_fill</div>
                <div class="code-name">#icon-ticket_money_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow_left_fill"></use>
                </svg>
                <div class="name">arrow_left_fill</div>
                <div class="code-name">#icon-arrow_left_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow_up_fill"></use>
                </svg>
                <div class="name">arrow_up_fill</div>
                <div class="code-name">#icon-arrow_up_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rounddown"></use>
                </svg>
                <div class="name">round_down</div>
                <div class="code-name">#icon-rounddown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoudiantong_kai"></use>
                </svg>
                <div class="name">手电筒_开</div>
                <div class="code-name">#icon-shoudiantong_kai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoudiantong_guan"></use>
                </svg>
                <div class="name">手电筒_关</div>
                <div class="code-name">#icon-shoudiantong_guan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loading1"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#icon-loading1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loadBrush"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#icon-loadBrush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Loading"></use>
                </svg>
                <div class="name">Loading</div>
                <div class="code-name">#icon-Loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round"></use>
                </svg>
                <div class="name">round</div>
                <div class="code-name">#icon-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emoji"></use>
                </svg>
                <div class="name">emoji</div>
                <div class="code-name">#icon-emoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorfill"></use>
                </svg>
                <div class="name">favor_fill</div>
                <div class="code-name">#icon-favorfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favor"></use>
                </svg>
                <div class="name">favor</div>
                <div class="code-name">#icon-favor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locationfill"></use>
                </svg>
                <div class="name">location_fill</div>
                <div class="code-name">#icon-locationfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundcheckfill"></use>
                </svg>
                <div class="name">round_check_fill</div>
                <div class="code-name">#icon-roundcheckfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundcheck"></use>
                </svg>
                <div class="name">round_check</div>
                <div class="code-name">#icon-roundcheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundclosefill"></use>
                </svg>
                <div class="name">round_close_fill</div>
                <div class="code-name">#icon-roundclosefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundclose"></use>
                </svg>
                <div class="name">round_close</div>
                <div class="code-name">#icon-roundclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundrightfill"></use>
                </svg>
                <div class="name">round_right_fill</div>
                <div class="code-name">#icon-roundrightfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundright"></use>
                </svg>
                <div class="name">round_right</div>
                <div class="code-name">#icon-roundright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timefill"></use>
                </svg>
                <div class="name">time_fill</div>
                <div class="code-name">#icon-timefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#icon-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warnfill"></use>
                </svg>
                <div class="name">warn_fill</div>
                <div class="code-name">#icon-warnfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#icon-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camerafill"></use>
                </svg>
                <div class="name">camera_fill</div>
                <div class="code-name">#icon-camerafill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-commentfill"></use>
                </svg>
                <div class="name">comment_fill</div>
                <div class="code-name">#icon-commentfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-comment"></use>
                </svg>
                <div class="name">comment</div>
                <div class="code-name">#icon-comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cascades"></use>
                </svg>
                <div class="name">cascades</div>
                <div class="code-name">#icon-cascades</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#icon-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pic"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#icon-pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#icon-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pulldown"></use>
                </svg>
                <div class="name">pull_down</div>
                <div class="code-name">#icon-pulldown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pullup"></use>
                </svg>
                <div class="name">pull_up</div>
                <div class="code-name">#icon-pullup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moreandroid"></use>
                </svg>
                <div class="name">more_android</div>
                <div class="code-name">#icon-moreandroid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deletefill"></use>
                </svg>
                <div class="name">delete_fill</div>
                <div class="code-name">#icon-deletefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cartfill"></use>
                </svg>
                <div class="name">cart_fill</div>
                <div class="code-name">#icon-cartfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-homefill"></use>
                </svg>
                <div class="name">home_fill</div>
                <div class="code-name">#icon-homefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-squarecheckfill"></use>
                </svg>
                <div class="name">square_check_fill</div>
                <div class="code-name">#icon-squarecheckfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-square"></use>
                </svg>
                <div class="name">square</div>
                <div class="code-name">#icon-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-squarecheck"></use>
                </svg>
                <div class="name">square_check</div>
                <div class="code-name">#icon-squarecheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fold"></use>
                </svg>
                <div class="name">fold</div>
                <div class="code-name">#icon-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-infofill"></use>
                </svg>
                <div class="name">info_fill</div>
                <div class="code-name">#icon-infofill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-searchlist"></use>
                </svg>
                <div class="name">search_list</div>
                <div class="code-name">#icon-searchlist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#icon-mobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobilefill"></use>
                </svg>
                <div class="name">mobile_fill</div>
                <div class="code-name">#icon-mobilefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-countdownfill"></use>
                </svg>
                <div class="name">countdown_fill</div>
                <div class="code-name">#icon-countdownfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-countdown"></use>
                </svg>
                <div class="name">countdown</div>
                <div class="code-name">#icon-countdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-keyboard"></use>
                </svg>
                <div class="name">keyboard</div>
                <div class="code-name">#icon-keyboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pullleft"></use>
                </svg>
                <div class="name">pull_left</div>
                <div class="code-name">#icon-pullleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pullright"></use>
                </svg>
                <div class="name">pull_right</div>
                <div class="code-name">#icon-pullright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picfill"></use>
                </svg>
                <div class="name">pic_fill</div>
                <div class="code-name">#icon-picfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresharrow"></use>
                </svg>
                <div class="name">refresh_arrow</div>
                <div class="code-name">#icon-refresharrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attentionfill"></use>
                </svg>
                <div class="name">attention_fill</div>
                <div class="code-name">#icon-attentionfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attention"></use>
                </svg>
                <div class="name">attention</div>
                <div class="code-name">#icon-attention</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tagfill"></use>
                </svg>
                <div class="name">tag_fill</div>
                <div class="code-name">#icon-tagfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radiobox"></use>
                </svg>
                <div class="name">radio_box</div>
                <div class="code-name">#icon-radiobox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radioboxfill"></use>
                </svg>
                <div class="name">radio_box_fill</div>
                <div class="code-name">#icon-radioboxfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-move"></use>
                </svg>
                <div class="name">move</div>
                <div class="code-name">#icon-move</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-messagefill"></use>
                </svg>
                <div class="name">message_fill</div>
                <div class="code-name">#icon-messagefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my"></use>
                </svg>
                <div class="name">my</div>
                <div class="code-name">#icon-my</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-myfill"></use>
                </svg>
                <div class="name">my_fill</div>
                <div class="code-name">#icon-myfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-triangledownfill"></use>
                </svg>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">#icon-triangledownfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-triangleupfill"></use>
                </svg>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">#icon-triangleupfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emojilight"></use>
                </svg>
                <div class="name">emoji_light</div>
                <div class="code-name">#icon-emojilight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-keyboardlight"></use>
                </svg>
                <div class="name">keyboard_light</div>
                <div class="code-name">#icon-keyboardlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sortlight"></use>
                </svg>
                <div class="name">sort_light</div>
                <div class="code-name">#icon-sortlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attentionforbid"></use>
                </svg>
                <div class="name">attention_forbid</div>
                <div class="code-name">#icon-attentionforbid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attentionforbidfill"></use>
                </svg>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">#icon-attentionforbidfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piclight"></use>
                </svg>
                <div class="name">pic_light</div>
                <div class="code-name">#icon-piclight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usefullfill"></use>
                </svg>
                <div class="name">usefull_fill</div>
                <div class="code-name">#icon-usefullfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usefull"></use>
                </svg>
                <div class="name">usefull</div>
                <div class="code-name">#icon-usefull</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home_light"></use>
                </svg>
                <div class="name">home_light</div>
                <div class="code-name">#icon-home_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my_light"></use>
                </svg>
                <div class="name">my_light</div>
                <div class="code-name">#icon-my_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart_light"></use>
                </svg>
                <div class="name">cart_light</div>
                <div class="code-name">#icon-cart_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home_fill_light"></use>
                </svg>
                <div class="name">home_fill_light</div>
                <div class="code-name">#icon-home_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart_fill_light"></use>
                </svg>
                <div class="name">cart_fill_light</div>
                <div class="code-name">#icon-cart_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my_fill_light"></use>
                </svg>
                <div class="name">my_fill_light</div>
                <div class="code-name">#icon-my_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search_light"></use>
                </svg>
                <div class="name">search_light</div>
                <div class="code-name">#icon-search_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan_light"></use>
                </svg>
                <div class="name">scan_light</div>
                <div class="code-name">#icon-scan_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message_light"></use>
                </svg>
                <div class="name">message_light</div>
                <div class="code-name">#icon-message_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close_light"></use>
                </svg>
                <div class="name">close_light</div>
                <div class="code-name">#icon-close_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera_light"></use>
                </svg>
                <div class="name">camera_light</div>
                <div class="code-name">#icon-camera_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh_light"></use>
                </svg>
                <div class="name">refresh_light</div>
                <div class="code-name">#icon-refresh_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back_light"></use>
                </svg>
                <div class="name">back_light</div>
                <div class="code-name">#icon-back_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share_light"></use>
                </svg>
                <div class="name">share_light</div>
                <div class="code-name">#icon-share_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-comment_light"></use>
                </svg>
                <div class="name">comment_light</div>
                <div class="code-name">#icon-comment_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favor_light"></use>
                </svg>
                <div class="name">favor_light</div>
                <div class="code-name">#icon-favor_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-comment_fill_light"></use>
                </svg>
                <div class="name">comment_fill_light</div>
                <div class="code-name">#icon-comment_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_android_light"></use>
                </svg>
                <div class="name">more_android_light</div>
                <div class="code-name">#icon-more_android_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_light"></use>
                </svg>
                <div class="name">more_light</div>
                <div class="code-name">#icon-more_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message_fill_light"></use>
                </svg>
                <div class="name">message_fill_light</div>
                <div class="code-name">#icon-message_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search_list_light"></use>
                </svg>
                <div class="name">search_list_light</div>
                <div class="code-name">#icon-search_list_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favor_fill_light"></use>
                </svg>
                <div class="name">favor_fill_light</div>
                <div class="code-name">#icon-favor_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete_light"></use>
                </svg>
                <div class="name">delete_light</div>
                <div class="code-name">#icon-delete_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back_android"></use>
                </svg>
                <div class="name">back_android</div>
                <div class="code-name">#icon-back_android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back_android_light"></use>
                </svg>
                <div class="name">back_android_light</div>
                <div class="code-name">#icon-back_android_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down_light"></use>
                </svg>
                <div class="name">down_light</div>
                <div class="code-name">#icon-down_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_close_light"></use>
                </svg>
                <div class="name">round_close_light</div>
                <div class="code-name">#icon-round_close_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round_close_fill_light"></use>
                </svg>
                <div class="name">round_close_fill_light</div>
                <div class="code-name">#icon-round_close_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location_light"></use>
                </svg>
                <div class="name">location_light</div>
                <div class="code-name">#icon-location_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings_light"></use>
                </svg>
                <div class="name">settings_light</div>
                <div class="code-name">#icon-settings_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warn_light"></use>
                </svg>
                <div class="name">warn_light</div>
                <div class="code-name">#icon-warn_light</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
